<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>传参页面</title>
</head>

<body>
    <div id="app">
        <h2>插槽</h2>
        <div>我是父组件
            <children-com>我是爸爸</children-com>
        </div>
        <hr>
        <h2>props and emit</h2>
        <div>我是父组件{{num}}
            <children-com1 :test-name="name" @msg-from-child="getChildren"></children-com1>
        </div>
        <hr>
        <h2>$parent/$children/ref</h2>
        <div @click="getRefs">
            <children-com2 ref="parCom"></children-com2>
        </div>
        <hr>

        <h2>bus</h2>
        <bus-com-a></bus-com-a>
        <bus-com-b></bus-com-b>
        <bus-com-c></bus-com-c>


        <hr>
        自定义指令
        自动focus
        <input  type="text" v-focus/>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        var childrenCom = {
            template: `
                <div>
                    我是子组件，来自父组件的的参数:
                    <h3><slot></slot></h3>
                </div>
            `
        }
        var childrenCom1 = {
            props: ['testName'],
            template: `
                <div>我收到父组件的值:
                        <span>{{testName}}</span>
                        <div @click="onClickC">点击父组件+1</div>
                    </div>
                    
            `,
            methods: {
                onClickC: function () {

                    this.$emit('msg-from-child', 1)
                }
            }
        }
        var childrenCom2 = {
            template: `
                <div>
                    我是子组件3<div>1244</div>
                </div>
            `,
            methods: {
                sayHello: function () {
                    window.alert('hello')
                }
            },
            data() {
                return {
                    title: 'Vue.js'
                }
            }
        }


        // bus
        var busComA = {
            template: `
                <div>
                    <h3>组件A:{{name}}</h3>   
                    <button @click="send">发送给组件C</button>
                </div>
           `,
            data() {
                return {
                    name: '小谭'
                }
            },
            methods: {
                send: function () {
                    Bus.$emit('data-a', this.name)
                }
            }
        }
        var busComB = {
            template: `
                <div>
                    <h3>组件B:{{age}}</h3>   
                    <button @click="send">发送给组件C</button>
                </div>
           `,
            data() {
                return {
                    age: 12
                }
            },
            methods: {
                send: function () {
                    Bus.$emit('data-b', this.age)
                }
            }
        }
        var busComC = {
            template: `
                <div>
                    <h3>组件C:{{name}},{{age}}</h3>   
                </div>
           `,
           data(){
            return{
                name:'',
                age:""
            }
           },
           mounted() {
            Bus.$on('data-a',name=>{
                this.name = name
            })
            Bus.$on('data-b',age=>{
                this.age = age
            })
           },
        }
        const Bus = new Vue()
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    testData: 1,
                    num: 0,
                    name: 'hello world'
                }
            },
            methods: {
                getChildren: function (value) {
                    this.num = value + this.num
                },
                getRefs: function () {
                    const com2 = this.$refs.parCom
                    console.log(com2)
                    console.log(com2.title)
                    com2.sayHello()

                }

            },
            components: {
                "ChildrenCom": childrenCom,
                "ChildrenCom1": childrenCom1,
                "ChildrenCom2": childrenCom2,
                "busComA":busComA,
                "busComB":busComB,
                "busComC":busComC
            },
            //指令
            directives:{
                focus:{
                    inserted:function(el){
                        el.focus()
                    }
                }
            }
        })
    </script>
</body>

</html>